import React, { useState, useMemo, useEffect, useCallback } from 'react';
import { Form, DatePicker, Input, Spin } from 'antd';
import PropTypes from 'prop-types';
import moment from 'moment';
import { useLocation } from 'dva';
import { getPopupContainer } from '@/utils';
import { serviceGetTodoDetail } from '@/services/todo';
import styles from './detail.less';

const formItemLayout = {
  labelCol: { span: 7 },
  wrapperCol: { span: 15 },
};

/**
 * @name 待办详情页面
 * @param { Object } query { id: 1 }
 */
const TodoDetail = ({ query = {}}) => {
  const [form] = Form.useForm();
  const localtion = useLocation();
  const [spinning, setSpinning] = useState(false);
  // * 待办id
  const queryId = useMemo(() => {
    const paramsId = query.id;
    const locationQueryId = localtion.query?.id;
    const queryId = paramsId ?? locationQueryId ?? '';
    return queryId;
  }, [localtion.query, query]);

  /**
   * @name 处理回显数据
   */
  const handleSetFidlesValues = useCallback((data = {}) => {
    const { expectedCompletionTime, createTime, processCreateTime } = data;
    const echoData = {};
    const echoDataBaseMapKey = [
      'id',
      'tasksContent',
      'creator',
      'operatorName',
      'processName',
      'taskInstanceId',
      'sourceApplicationName',
      'jumpConnection',
      'isTransfer',
      'isUrgent',
      'fieldArea',
      'creatorName',
    ];
    echoDataBaseMapKey.map((t) => {
      echoData[t] = data[t];
      return null;
    });
    if (createTime) {
      echoData.createTime = moment(createTime);
    }
    if (expectedCompletionTime) {
      echoData.expectedCompletionTime = moment(expectedCompletionTime);
    }
    if (processCreateTime) {
      echoData.processCreateTime = moment(processCreateTime);
    }
    echoData.isTransfer =
      {
        true: '是',
        false: '否',
      }[echoData.isTransfer] ?? '';
    echoData.isUrgent =
      {
        true: '是',
        false: '否',
      }[echoData.isUrgent] ?? '';
    try {
      echoData.fieldArea = JSON.stringify(echoData.fieldArea);
    } catch (error) {
      echoData.fieldArea = '';
    }
    return echoData;
  }, []);

  const getDetail = async () => {
    try {
      setSpinning(true);
      const { success, data } = await serviceGetTodoDetail({ id: queryId });
      setSpinning(false);
      if (success) {
        const echoData = handleSetFidlesValues(Object.assign({ id: queryId }, data));
        form.setFieldsValue(echoData);
      }
    } catch (error) {
      setSpinning(false);
    }
  };
  useEffect(() => {
    if (queryId) {
      getDetail();
    }
  }, [queryId]);
  return (
    <Spin spinning={spinning}>
      <Form form={form} {...formItemLayout} layout="horizontal" className={styles.todoDetailForm}>
        <div className={styles.title}>基本信息</div>
        <Form.Item name="id" label="待办ID">
          <Input disabled />
        </Form.Item>
        <Form.Item name="tasksContent" label="待办标题/内容">
          <Input disabled />
        </Form.Item>
        <Form.Item name="creator" label="创建人工号">
          <Input disabled />
        </Form.Item>
        <Form.Item name="creatorName" label="创建人名称">
          <Input disabled />
        </Form.Item>
        <Form.Item name="createTime" label="待办生成时间">
          <DatePicker placeholder="" showTime disabled getPopupContainer={getPopupContainer} />
        </Form.Item>
        <Form.Item name="operatorName" label="处理人">
          <Input disabled />
        </Form.Item>
        <Form.Item name="expectedCompletionTime" label="期望完成时间">
          <DatePicker placeholder="" showTime disabled getPopupContainer={getPopupContainer} />
        </Form.Item>
        <div className={styles.title}>流程信息</div>
        <Form.Item name="processName" label="流程模板名称">
          <Input disabled />
        </Form.Item>
        <Form.Item name="processCreateTime" label="流程创建时间">
          <DatePicker placeholder="" showTime disabled getPopupContainer={getPopupContainer} />
        </Form.Item>
        <Form.Item name="taskInstanceId" label="Task ID">
          <Input disabled />
        </Form.Item>
        <div className={styles.title}>其他信息</div>
        <Form.Item name="sourceApplicationName" label="来源应用">
          <Input disabled />
        </Form.Item>
        <Form.Item name="jumpConnection" label="跳转链接">
          <Input disabled />
        </Form.Item>
        <Form.Item name="isTransfer" label="是否转办">
          <Input disabled />
        </Form.Item>
        <Form.Item name="isUrgent" label="是否紧急">
          <Input disabled />
        </Form.Item>
        <Form.Item name="fieldArea" label="自定义字段/待办变量">
          <Input.TextArea autoSize={{ minRows: 15 }} disabled />
        </Form.Item>
      </Form>
    </Spin>
  );
};

TodoDetail.propTypes = {
  query: PropTypes.object,
};

TodoDetail.defaultProps = {
  query: {},
};

export default React.memo(TodoDetail);
